<template>
  <div style="height: 100%">
    <el-form ref="form" :model="form" label-width="80px">
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="接口名称:">
            <el-input
              size="mini"
              v-model="apiDetails.data.name"
              style="width: 240px"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="请求方式:">
            <el-select
              size="mini"
              v-model="apiDetails.data.method"
              placeholder="请选择请求方式"
              style="width: 240px"
            >
              <el-option label="get" value="get"></el-option>
              <el-option label="post" value="post"></el-option>
              <el-option label="delete" value="delete"></el-option>
              <el-option label="put" value="put"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="域 名:">
            <el-input
              size="mini"
              v-model="apiDetails.data.domain"
              placeholder="请输入域名"
              style="width: 240px"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="调试环境:">
            <el-select
              v-model="envValue"
              placeholder="请选择"
              style="width: 240px"
              size="mini"
            >
              <el-option
                v-for="item in envList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="24">
          <el-form-item label="接口地址:">
            <el-input
              size="mini"
              v-model="apiDetails.data.path"
              placeholder="请输入请求地址"
              style="width: 945px"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="params" :name="'params'">
            <el-table
              :data="apiDetails.data.requestParams"
              :show-header="false"
              max-height="400"
              size="mini"
            >
              <el-table-column prop="key">
                <template slot-scope="scope">
                  <el-input
                    size="mini"
                    v-model="scope.row.key"
                    @input="
                      inputChangedF(scope.$index, apiDetails.data.requestParams)
                    "
                    placeholder="key"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="value">
                <template slot-scope="scope">
                  <el-input
                    size="mini"
                    v-model="scope.row.value"
                    placeholder="value"
                  ></el-input>
                </template>
              </el-table-column>
              <!-- <el-table-column width="40">
              <template slot-scope ="scope">
                <i class="el-icon-circle-plus-outline"  @click="handleAdd(scope.$index, scope.row)"></i>
              </template>
            </el-table-column> -->
              <el-table-column width="40">
                <template slot-scope="scope">
                  <i
                    class="el-icon-remove-outline"
                    v-if="scope.row.key != ''"
                    @click="
                      handleDelete(scope.$index, apiDetails.data.requestParams)
                    "
                  ></i>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="header" :name="'header'">
            <el-table
              :data="apiDetails.data.requestHeader"
              :show-header="false"
            >
              <el-table-column prop="key">
                <template slot-scope="scope">
                  <el-input
                    size="mini"
                    v-model="scope.row.key"
                    @input="
                      inputChangedF(scope.$index, apiDetails.data.requestHeader)
                    "
                    placeholder="key"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="value">
                <template slot-scope="scope">
                  <el-input
                    size="mini"
                    v-model="scope.row.value"
                    placeholder="value"
                  ></el-input>
                </template>
              </el-table-column>
              <!-- <el-table-column width="40">
              <template slot-scope ="scope">
                <i class="el-icon-circle-plus-outline"  @click="handleAdd(scope.$index, scope.row)"></i>
              </template>
            </el-table-column> -->
              <el-table-column width="40">
                <template slot-scope="scope">
                  <i
                    class="el-icon-remove-outline"
                    v-if="scope.row.key != ''"
                    @click="
                      handleDelete(scope.$index, apiDetails.data.requestHeader)
                    "
                  ></i>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="body" :name="'body'">
            <div>
              <template>
                <el-radio-group v-model="radio" @change="xg">
                  <el-radio label="form">data-form</el-radio>
                  <el-radio label="raw">raw</el-radio>
                </el-radio-group>
              </template>
              <el-button v-if="radio == 'raw'" type="text" style="float: right" @click="beautiful()">beautiful
              </el-button>
            </div>
            <div v-if="radio == 'form'">
              <el-table
                :data="apiDetails.data.requestDataParams"
                :show-header="false"
                max-height="400"
              >
                <el-table-column prop="key">
                  <template slot-scope="scope">
                    <el-input
                      size="mini"
                      v-model="scope.row.key"
                      @input="
                        inputChangedF(
                          scope.$index,
                          apiDetails.data.requestDataParams
                        )
                      "
                      placeholder="key"
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="value">
                  <template slot-scope="scope">
                    <el-input
                      size="mini"
                      v-model="scope.row.value"
                      placeholder="value"
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column width="40">
                  <template slot-scope="scope">
                    <i
                      class="el-icon-remove-outline"
                      v-if="scope.row.key != ''"
                      @click="
                        handleDelete(
                          scope.$index,
                          apiDetails.data.requestDataParams
                        )
                      "
                    ></i>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div>
              <!-- <yaml-editor  v-model="editor" /> -->
              <!-- <code-format :aceData="editor" v-if="radio=='raw'" v-on:changeAce="sx($event)"></code-format> -->
              <template>
                <editor
                  v-if="radio == 'raw'"
                  v-model="editor"
                  @init="editorInit"
                  lang="json"
                  :options="editorOptions"
                  theme="chrome"
                  width="100%"
                  height="200"
                >
                </editor>
              </template>
            </div>
          </el-tab-pane>
          <el-tab-pane label="断言" :name="'assert'">
            <el-table
              :data="apiDetails.data.requestAssert"
              :show-header="false"
            >
              <el-table-column prop="checkList">
                <template slot-scope="scope">
                  <el-input
                    size="mini"
                    v-model="scope.row.checkList"
                    @input="
                      inputChangedA(scope.$index, apiDetails.data.requestAssert)
                    "
                    placeholder="key"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="value">
                <template slot-scope="scope">
                  <el-input
                    size="mini"
                    v-model="scope.row.value"
                    placeholder="value"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column width="40">
                <template slot-scope="scope">
                  <i
                    class="el-icon-remove-outline"
                    v-if="scope.row.checkList != ''"
                    @click="
                      handleDelete(scope.$index, apiDetails.data.requestAssert)
                    "
                  ></i>
                </template>
              </el-table-column>
            </el-table
            >
          </el-tab-pane>
          <el-tab-pane label="提取参数" :name="'parameterExtraction'">
            <el-table
              :data="apiDetails.data.parameterExtractions"
              :show-header="false"
            >
              <el-table-column prop="dataType" width="200px">
                <template slot-scope="scope">
                  <el-select
                    v-model="scope.row.dataType"
                    placeholder="请选择"
                    style="width: 180px"
                    size="mini"
                  >
                    <el-option
                      v-for="item in dataTypeList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column prop="extractName">
                <template slot-scope="scope">
                  <el-input
                    size="mini"
                    v-model="scope.row.extractName"
                    @input="
                      inputChangedP(scope.$index, apiDetails.data.parameterExtractions)
                    "
                    placeholder="extractName"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="expression">
                <template slot-scope="scope">
                  <el-input
                    size="mini"
                    v-model="scope.row.expression"
                    placeholder="expression"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column width="40">
                <template slot-scope="scope">
                  <i
                    class="el-icon-remove-outline"
                    v-if="scope.row.extractName != ''"
                    @click="
                      handleDelete(scope.$index, apiDetails.data.parameterExtractions)
                    "
                  ></i>
                </template>
              </el-table-column>
            </el-table
            >
          </el-tab-pane>
        </el-tabs>
      </el-form-item>
      <el-form-item style="margin-bottom: 10px; margin: 0 auto">
        <el-button type="primary" @click="onSubmit" size="mini"
        >接口更新
        </el-button
        >
        <el-button size="mini" @click="sx">刷新页面</el-button>
        <el-button size="mini" type="primary" @click="onDebug">Debug</el-button>
        <el-button
          v-show="resultButton"
          size="mini"
          type="primary"
          @click="showResult"
        >调试结果
        </el-button
        >
      </el-form-item>
    </el-form>
    <api-result-drawer
      :ApiResultDrawer.sync="result"
      :drawer="drawer"
      v-on:changeDrawer="ct"
    ></api-result-drawer>
  </div>
</template>

<script>
  import {inputChanged} from "@/js/apiPageJs/apiDetails";
  import ApiResultDrawer from "./ApiResultDrawer.vue";
  // import YamlEditor from '@/components/YamlEditor/index.vue';
  import CodeFormat from "@/components/test";

  export default {
    props: {
      apiDetails: {
        type: Object,
      },
      envList: {
        type: Array,
      },
    },
    components: {
      ApiResultDrawer,
      CodeFormat,
      editor: require("vue2-ace-editor"),
    },
    watch: {
      apiDetails(val, newval) {
        this.radio = this.apiDetails.data.requestParamType;
        console.log(this.radio)
        if (val.data.method == "post") {
          this.activeName = 'body'
        } else {
          this.activeName = 'params'
        }
        this.editor = this.apiDetails.data.requestBody;
        this.envValue = this.apiDetails.data.envId;
        console.log(val.data);
        if (!val.data.requestParams) {
          this.apiDetails.data.requestParams = [{key: "", val: ""}];
        } else if (
          val.data.requestParams.length == 0 ||
          val.data.requestParams[val.data.requestParams.length - 1].key != ""
        ) {
          this.apiDetails.data.requestParams.push({
            key: "",
            value: "",
          });
        }
        if (!val.data.requestHeader) {
          this.apiDetails.data.requestHeader = [{key: "", val: ""}];
        } else if (
          val.data.requestHeader.length <= 0 ||
          val.data.requestHeader[val.data.requestHeader.length - 1].key != ""
        ) {
          this.apiDetails.data.requestHeader.push({
            key: "",
            value: "",
          });
        }
        if (!val.data.requestAssert) {
          this.apiDetails.data.requestAssert = [{checkList: "", val: ""}];
        } else if (
          val.data.requestAssert.length <= 0 ||
          val.data.requestAssert[val.data.requestAssert.length - 1].checkList !=
          ""
        ) {
          this.apiDetails.data.requestAssert.push({
            checkList: "",
            value: "",
          });
        }
        if (!val.data.requestDataParams) {
          this.apiDetails.data.requestDataParams = [{key: "", val: ""}];
        } else if (
          val.data.requestDataParams.length <= 0 ||
          val.data.requestDataParams[val.data.requestDataParams.length - 1].key !=
          ""
        ) {
          this.apiDetails.data.requestDataParams.push({
            key: "",
            value: "",
          });
        }
        if (!val.data.parameterExtractions) {
          this.apiDetails.data.parameterExtractions = [{dataType: 0, expression: "", extractName: ""}]
        } else if (
          val.data.parameterExtractions.length <= 0 ||
          val.data.parameterExtractions[val.data.parameterExtractions.length - 1].key !=
          ""
        ) {
          this.apiDetails.data.parameterExtractions.push({dataType: 0, expression: "", extractName: ""});
          console.log(this.apiDetails.data.parameterExtractions);
          // console.log("监测成功");
        }
      }
      ,
        deep: true,
      },
      data() {
        return {
          //   childrenName:this.name,
          // getApiDetails:this.apiDetails,
          dataType:0,
          dataTypeList:[
            {
              id:0,
              name:"提取消息头内容",

            },{
              id:1,
              name:"提取返回内容",
            }
          ],
          radio: this.apiDetails.data.requestParamType,
          editor: "",
          drawer: false,
          envValue: this.apiDetails.data.envId,
          resultButton: false,
          result: {

          },
          activeName: "params",
          form: {
            name: "",
            region: "",
            date1: "",
            date2: "",
            delivery: false,
            type: [],
            resource: "",
            desc: "",
          },
          editorOptions: {
            // 设置代码编辑器的样式
            enableBasicAutocompletion: true,
            enableSnippets: true,
            enableLiveAutocompletion: true,
            tabSize: 2,
            fontSize: 12,
            showPrintMargin: false, //去除编辑器里的竖线
          },
        };
      },
      computed: {
        projectId: function () {
          return this.$store.getters.getProjectId;
        },
      },
      methods: {
        editorInit() {
          require("brace/theme/chrome");
          require("brace/ext/language_tools"); //language extension prerequsite...
          require("brace/mode/yaml");
          require("brace/mode/json");
          require("brace/mode/less");
          require("brace/snippets/json");
        },
        xg(value) {
          this.apiDetails.data.requestParamType = value;
          console.log(value);
        },
        tx(value) {
          console.log(value);
          this.apiDetails.data.requestBody = this.editorthis = value;
        },
        sx(value) {
          this.apiDetails.data.requestBody = this.editorthis = value;
          console.log(value);
        },
        showResult() {
          this.drawer = true;
        },
        ct() {
          this.drawer = false;
        },
        inputChangedF(index, row) {
          console.log(row);
          inputChanged(index, row, {key: "", value: ""});
        },
        inputChangedA(index, row) {
          console.log(row);
          inputChanged(index, row, {checkList: "", value: ""});
        },
        inputChangedP(index, row) {
          console.log(row);
          inputChanged(index, row, {dataType: 0, expression: "", extractName: ""});
        },
        onSubmit() {
          this.apiDetails.data.requestBody = this.editor;
          this.apiDetails.data.envId = this.envValue;
          this.apiDetails.data.requestParams.forEach((item, index) => {
            if (item.key == "") {
              this.apiDetails.data.requestParams.splice(index, 1);
            }
          });
          this.apiDetails.data.requestHeader.forEach((item, index) => {
            if (item.key == "") {
              this.apiDetails.data.requestHeader.splice(index, 1);
            }
          });
          this.apiDetails.data.requestAssert.forEach((item, index) => {
            if (item.checkList == "") {
              this.apiDetails.data.requestAssert.splice(index, 1);
            }
          });
          this.apiDetails.data.requestDataParams.forEach((item, index) => {
            if (item.key == "") {
              this.apiDetails.data.requestDataParams.splice(index, 1);
            }
          });
          this.apiDetails.data.parameterExtractions.forEach((item, index) => {
            if (item.expression == "") {
              this.apiDetails.data.parameterExtractions.splice(index, 1);
            }
          });
          this.$api
            .apiUpdate(this.apiDetails.data)
            .then((res) => {
              this.$message({
                message: res.message,
                type: "success",
              });
            })
            .catch((err) => {
              this.$message.error(err);
            });
          this.apiDetails.data.requestParams.push({
            key: "",
            value: "",
          });
          this.apiDetails.data.requestHeader.push({
            key: "",
            value: "",
          });
          this.apiDetails.data.requestAssert.push({
            checkList: "",
            value: "",
          });
          this.apiDetails.data.requestDataParams.push({
            key: "",
            value: "",
          });
          this.apiDetails.data.parameterExtractions.push({dataType: 0, expression: "", extractName: ""});
          console.log("submit!");
        },
        beautiful() {
          try {
            this.editor = JSON.parse(this.editor)
            this.editor = JSON.stringify(this.editor, null, 2)
          } catch (e) {
            this.$message.warning("该字符串非json格式，无法转换");
          }

          console.log(JSON.stringify(this.editor, null, 2))
        },
        onDebug() {
          this.$api
            .apiRun({id: this.apiDetails.data.id})
            .then((res) => {
              this.result = res.data;
              console.log(res);
            })
            .catch((err) => {
              console.log(err);
            });
          console.log("onDebug!");
          this.resultButton = true;
          this.drawer = true;
        },
        changeDate() {
          this.$emit("input", this.apiDetails);
        },
        handleClick(tab, event) {
          // console.log(this.drawer);
          console.log(tab, event);
        },
        handleDelete(index, rows) {
          console.log(rows);
          rows.splice(index, 1);
          // if (this.apiDetails.data.requestParams.length == 0) {
          //   this.apiDetails.data.requestParams.push({
          //     key: "",
          //     value: "",
          //   });
          // }
        },
        // handleAdd(index,rows){
        //   if(this.apiDetails.data.requestParams[this.apiDetails.data.requestParams.length-1].key =="" ){
        //     this.$message.error("请先添加参数");
        //   }
        //   else{
        //   this.apiDetails.data.requestParams.push({
        //     key:"",
        //     value:"",
        //   });
        //   }
        //   console.log(rows.key);
        //   console.log("onClick!!");
        // }
      },
    };
</script>
